<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>在线生成二维码</title>
    <link rel="stylesheet" href="https://ui.junyouyun.com/wmlh/layui/css/layui.css" media="all"/>
    <style>
    	* { margin: 0; padding: 0;}
    	html,body{ width:100%;height:100%;background-color: #FFFFFF;display:flex; }
    	.left{ width:60%;height:100%; }
    	.right {width:40%;height:100%;background-color:#FAFAFA;display: flex;align-items: center;justify-content: center;}
    	.qrcode_neirong {margin-left: 10%;width: 80%;margin-top: 5%;}
    	.qrcode_neirong textarea {width: 100%;}
    	.qrcode_color {margin-left: 10%;margin-top: 5%;width: 80%;}
    	.qrcode_margin {margin-left: 10%;margin-top: 5%;width: 80%;}
    	.mabianju,.rongcuolv {width:100%;margin-top: 2%;}
    	.layui-form-label { font-weight:bold; }
    	.layui-icon-tips { margin-left:5%; }
    	.text_align_left { text-align:left; }
    	.file {position: relative;display: inline-flex;background: #D0EEFF;border: 1px solid #99D3F5;border-radius: 4px;padding: 4px 12px;overflow: hidden;color: #1E88C7;text-decoration: none;text-indent: 0;line-height: 20px;margin-top: .5%;cursor: pointer;}
		.file input { position: absolute;  font-size: 100px;  right: 0;  top: 0;  opacity: 0;}.file:hover {  background: #AADFFD;  border-color: #78C3F3;  color: #004974;  text-decoration: none;}
		.qrcode_logo_div { position:relative;width:60px;height:60px;margin-left: 5%;display:none; }
		.qrcode_logo { width:100%;height:100%;border: 1px solid #CCCCCC;border-radius: 2px;}
		.upload_image { display: flex;align-items: center; }
		.qrcode_logo_delete {position:absolute;top: -15%;right: -15%;background-color: #FFFFFF;border-radius: 999px;cursor: pointer;}
		.layui-form-radio {margin: 2px 15px 0 0;}
		#zdycc {width: 15%;display: none;margin-left: -3%;}
		.tips_text {position: absolute;top: 40%;font-weight: bold;}
		.right_qrcode_div {text-align: center;width: 200px;height: 200px;background-color: #FFFFFF;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;position: relative;}
		.right_qrcode_div img {width: 100%;}
		.right_save_div {width: 100%;margin-top: 5%;text-align: center;}
    </style>
</head>
<body>
	<div class="left layui-form">
		
	    <div class="layui-input-block qrcode_neirong">
	      <textarea placeholder="请输入二维码内容" id="qrcode_neirong" class="layui-textarea"></textarea>
	    </div>

	    <div class="layui-form-item qrcode_margin">
		    <div class="layui-inline" style="width: 100%;height:60px;">
		        <label class="layui-form-label text_align_left" style="height: 100%; display: flex; align-items: center;padding: 0 15px;">Logo:</label>
		        <div class="layui-input-block" style="height: 100%;display: flex;">
		        	<div class="upload_image">
		            	<a href="javascript:;" class="file">上传logo <input type="file" id="upload_image"></a>
		            </div>
		            <div class="qrcode_logo_div">
		            	<img class="qrcode_logo" src="">
		            	<i class="layui-icon layui-icon-delete qrcode_logo_delete"></i>
		            </div>
		        </div>
		    </div>
		</div>

	    <div class="layui-form-item qrcode_margin">
		    <div class="layui-inline" style="width: 100%;">
		        <label class="layui-form-label text_align_left">尺寸<small>px</small>:</label>
		        <div class="layui-input-block">
	            	<input type="radio" name="chicun" value="200" title="200×200" lay-filter="chicun" checked="checked">
	            	<input type="radio" name="chicun" value="300" title="300×300" lay-filter="chicun">
	            	<input type="radio" name="chicun" value="400" title="400×400" lay-filter="chicun">
	            	<input type="radio" name="chicun" value="500" title="500×500" lay-filter="chicun">
	            	<input type="radio" name="chicun" value="zdy" title="自定义尺寸" lay-filter="chicun">
	            	<input type="number" id="zdycc" step="1" class="layui-input" placeholder="填写数字">
		        </div>
		    </div>
		</div>

	    <div class="layui-form-item qrcode_color">
	        <div class="layui-inline" style="width:48%;">
	            <label class="layui-form-label text_align_left">码颜色:</label>
	            <div class="layui-input-block">
	                <div class="layui-input-inline" style="width: 120px;">
				        <input type="text" value="#000000" placeholder="请选择码颜色" class="layui-input" id="colorDark" readonly="readonly">
				    </div>
	                <div class="layui-inline" style="left: -11px;">
				        <div class="colorDark"></div>
				    </div>
	            </div>
	        </div>
	        <div class="layui-inline" style="width:48%;">
	            <label class="layui-form-label text_align_left">背景色:</label>
	            <div class="layui-input-block">
	                <div class="layui-input-inline" style="width: 120px;">
				        <input type="text" value="#FFFFFF" placeholder="请选择背景色" class="layui-input" id="colorLight" readonly="readonly">
				    </div>
				    <div class="layui-inline" style="left: -11px;">
				        <div class="colorLight"></div>
				    </div>
	            </div>
	        </div>
	    </div>

	    <div class="layui-form-item qrcode_margin">
		    <div class="layui-inline" style="width: 100%;">
		        <label class="layui-form-label text_align_left tips mabianju_" data-tips_="mabianju_" data-tips='二维码图案距离四周的边距'>码边距<i class="layui-icon layui-icon-tips"></i>:</label>
		        <div class="layui-input-block" style="position: relative;">
		            <div class="demo-slider mabianju"></div>
		            <div class="tips_text" style="left: 14%;">当前页边距<span class="mabianju__">10</span>px</div>
		            <input type="hidden" id="mabianju" value="20">
		        </div>
		    </div>
		</div>

		<div class="layui-form-item qrcode_margin">
		    <div class="layui-inline" style="width: 100%;">
		        <label class="layui-form-label text_align_left tips rongcuolv_" data-tips_="rongcuolv_" data-tips="容错率设置越高，可在遮挡越多的情况下被扫描出来。">容错率<i class="layui-icon layui-icon-tips"></i>:</label>
		        <div class="layui-input-block" style="position: relative;">
		            <div class="demo-slider rongcuolv"></div>
		            <div class="tips_text" style="left: 86%;">当前容错率:<span class="rongcuolv__">H 30%</span></div>
		            <input type="hidden" id="rongcuolv" value="H">
		        </div>
		    </div>
		</div>

		<div class="right_save_div"><div class="right_save layui-btn layui-btn-normal">下载二维码</div></div>

	</div>
	<div class="right">
		<div class="right_qrcode_div" id="qrcode"></div>
	</div>
	<script type="text/javascript" src="https://ui.junyouyun.com/wmlh/jquery-3.2.0.min.js"></script>
    <script type="text/javascript" src="https://ui.junyouyun.com/wmlh/layui/layui.js"></script>
	<script type="text/javascript" src="qrcode.js"></script>
    <script>
    	layui.use(['colorpicker','slider','form'], function(){
		  	var $ = layui.$
		  	,form = layui.form
		  	,slider = layui.slider
		  	,colorpicker = layui.colorpicker
		  	,tip_index = 0
		  	,qrcode;


	    	// 提示语
		    $(document).on('mouseenter', '.tips', function () {
		        tip_index = layer.tips($(this).data('tips'), '.'+$(this).data('tips_'), { time: 0, tips: 3 });
		    }).on('mouseleave', '.tips' , function () {
		        layer.close(tip_index);
		    });


		    qrcode = new QRCode(document.getElementById("qrcode"), {
				width : 200,
				height : 200,
				colorDark : "#000000",		// 码颜色
				colorLight : "#FFFFFF",  	// 背景色
				margin : "0",
				correctLevel : QRCode.CorrectLevel.H
			});
			
		    // 统一生成二维码
			function shengcheng(){
				qrcode.clear();
				$('#qrcode').empty();

				var elText = document.getElementById("qrcode_neirong");
				if (!elText.value) {
					layer.msg('请输入二维码内容',{icon:0,time:2000});
					// elText.focus();
					return false;
				}

				// 获取尺寸
				var chicun = $('input[type=radio][name=chicun]:checked').val();
				if( chicun == 'zdy' ){
					chicun = $('#zdycc').val();
				}
				if( !chicun ){
					chicun = 200;
				}

				// 容错率
				var rongcuolv = $('#rongcuolv').val(),correctLevel;
				if( rongcuolv == 'L' ){
		    		correctLevel = QRCode.CorrectLevel.L;
		    	} else if( rongcuolv == 'M' ){
		    		correctLevel = QRCode.CorrectLevel.M;
		    	} else if( rongcuolv == 'Q' ){
		    		correctLevel = QRCode.CorrectLevel.Q;
		    	} else if( rongcuolv == 'H' ){
		    		correctLevel = QRCode.CorrectLevel.H;
		    	}

			    // 生成二维码
				qrcode = new QRCode(document.getElementById("qrcode"), {
					text: elText.value,
					width : chicun,
					height : chicun,
					colorDark : $('#colorDark').val(),		// 码颜色
					colorLight : $('#colorLight').val(),  	// 背景色
					margin : $('#mabianju').val(),			// 码边距
					correctLevel : correctLevel,			// 容错率
				});


				if( chicun > 500 ){
					chicun = 500;
					layer.msg('页面有限,图片是'+chicun+'X'+chicun,{icon:0,time:2000});
		    	}

		    	// 码边距
				var margin = parseInt( $('#mabianju').val() );
				if( margin > 0 ){

			    	$('#qrcode').css( { width : ( parseInt(chicun) + margin ) , height : ( parseInt(chicun) + margin ) } );
					$('#qrcode img').css( { width : chicun , height : chicun , padding : margin/2 } );
				} else {
					$('#qrcode').css( { width : chicun , height : chicun } );
				}

				// logo
				var qrcode_logo = $('.qrcode_logo').attr( 'src' );
				if( qrcode_logo ){
			        qrcode.logo(qrcode_logo);
				}
				
			}

		    // 二维码内容 当元素失去焦点时触发 blur 事件。
			$("#qrcode_neirong").on("blur", function () {
				shengcheng();
			}).on("keydown", function (e) {  // 当键盘或按钮被按下时
				if (e.keyCode == 13) {
					shengcheng();
				}
			});

			// 监听选择尺寸
			form.on('radio(chicun)', function(data){
			    if( data.value == 'zdy'){
			    	$('#zdycc').css( 'display' , 'inline-block' );
			    } else {
			    	$('#zdycc').val( '' );
			    	$('#zdycc').css( 'display' , 'none' );
			    	shengcheng();
			    }
			});
			// 自定义尺寸
			$("#zdycc").on("blur",function(e){
			    if( e.delegateTarget.value > 1000 ){
			        layer.msg("尺寸最大可设为1000px!",{icon: 2,time:1000});
			    	$(this).val( 1000 );
			    	return false;
			    }
			    shengcheng();
			});


			// 选择码颜色
		  	colorpicker.render({
			    elem: '.colorDark'
			    ,color: '#000000'
			    ,done: function(color){
			      	$('#colorDark').val(color);
			    	shengcheng();
			    }
			});
			// 选择背景色
			colorpicker.render({
			    elem: '.colorLight'
			    ,color: '#FFFFFF'
			    ,done: function(color){
			      	$('#colorLight').val(color);
			    	shengcheng();
			    }
			});

			// 选择码边距
			slider.render({
			    elem: '.mabianju'
			    ,step: 20 //步长
			    ,showstep: true //开启间隔点
			    ,value: 20 //初始值
			    ,change: function(value){
				    $('#mabianju').val(value);
				    $('.mabianju__').html(value/2);

				    var mabianju__ = $('.mabianju__').parent();
			    	if( value == 0 ){
			    		mabianju__.css( 'left' , '0%' );
			    	} else if( value == 20 ){
			    		mabianju__.css( 'left' , '14%' );
			    	} else if( value == 40 ){
			    		mabianju__.css( 'left' , '34%' );
			    	} else if( value == 60 ){
			    		mabianju__.css( 'left' , '54%' );
			    	} else if( value == 80 ){
			    		mabianju__.css( 'left' , '74%' );
			    	} else if( value == 100 ){
			    		mabianju__.css( 'left' , '88%' );
			    	}

			    	shengcheng();
				 }
			    ,setTips: function(value){ //自定义提示文本
			     	return '码边距:' + value/2 + 'px';
			    }
			});

			// 选择容错率
			slider.render({
			    elem: '.rongcuolv'
			    ,step: 25 //步长
			    ,showstep: true //开启间隔点
			    ,value: 100 //初始值
			    ,change: function(value){
				    var rongcuolv = $('#rongcuolv');
				    var rongcuolv_ = $('.rongcuolv__');
				    var rongcuolv__ = $('.rongcuolv__').parent();

			    	if( value == 0 ){
			    		rongcuolv.val('H');
			    		rongcuolv_.html('H 30%');
			    		rongcuolv__.css( 'left' , '0%' );
			    	} else if( value == 25 ){
			    		rongcuolv.val('L');
			    		rongcuolv_.html('L 7%');
			    		rongcuolv__.css( 'left' , '18%' );
			    	} else if( value == 50 ){
			    		rongcuolv.val('M');
			    		rongcuolv_.html('M 15%');
			    		rongcuolv__.css( 'left' , '43%' );
			    	} else if( value == 75 ){
			    		rongcuolv.val('Q');
			    		rongcuolv_.html('Q 25%');
			    		rongcuolv__.css( 'left' , '68%' );
			    	} else if( value == 100 ){
			    		rongcuolv.val('H');
			    		rongcuolv_.html('H 30%');
			    		rongcuolv__.css( 'left' , '86%' );
			    	}
			    	shengcheng();
				 }
			    ,setTips: function(value){ //自定义提示文本
			    	if( value == 25 ){
			    		return '容错率 : L 7%';
			    	} else if( value == 50 ){
			    		return '容错率 : M 15%';
			    	} else if( value == 75 ){
			    		return '容错率 : Q 25%';
			    	} else {
			    		return '容错率 : H 30%';
			    	}
			    }
			});


		  	// 上传logo
		  	$("#upload_image").change(function (event){
				var files = event.target.files,file;

			    var filePath = $(this).val(),
			      fileFormat = filePath
			        .substring(filePath.lastIndexOf("."))
			        .toLowerCase(); //获取文件格式

			    if (files && files.length > 0) {
			      	file = files[0];
			      	if (file.size > 1024 * 1024 * 10) {
			        	layer.msg("图片大小不能超过 10MB!",{icon: 2,time:1000});
			        	return false;
			      	}
			      	if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
			        	layer.msg("上传错误,文件格式必须为：png/jpg/jpeg",{icon: 2,time:1000});
			        	return false;
			      	}

			    let reader = new FileReader();
			      	reader.readAsDataURL(file);
			      	reader.onload = (e) => {
			      		$('.qrcode_logo').attr( 'src' , reader.result );
			      		$('.qrcode_logo_div').show();
			        	qrcode.logo(reader.result);
			      	};
			    }
			});

			// 删除logo
			$(".qrcode_logo_delete").click(function() {
				layer.confirm('确定删除logo吗？', {icon: 3, title: '提示信息'}, function (index) {
					$('.qrcode_logo').attr( 'src' , '' );
				    $('.qrcode_logo_div').hide();
				    $('.qrcode_add_logo').remove();
				    layer.close(index);
			    	shengcheng();
				})
			});

			// 保存二维码
			$(".right_save").click(function() {
				if( !$('#qrcode_neirong').val() ){
					layer.msg('请输入二维码内容',{icon:0,time:2000});return false;
				}
				qrcode.save();
			});
		});
    </script>
</body>
</html>